<template>
  <div class="content-container">
    <!-- 搜索栏 -->
    <div ref="adminContentSearch" class="content-search-wrap">
      <el-form 
        class="content-search"
        inline
        size="mini"
      >
        <el-form-item label="类型名称">
          <el-input v-model="userId.account" placeholder="名称"></el-input>
        </el-form-item>

        <el-form-item>
        <el-button size="mini" type="primary">搜索</el-button>
        <el-button size="mini" type="danger">清空</el-button>
      </el-form-item>
      </el-form>
    </div>
    <!-- 工具栏 -->
    <div ref="adminContentTools" class="content-tools-wrap hidden">
        <div class="tools-left f-l">
          
          <el-button-group>
             <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleAdd">新增</el-button>
             <el-button size="mini" type="primary" icon="el-icon-share">导出</el-button>
         </el-button-group>

        </div>
        <div class="tools-right f-r">
          
        <el-button size="mini" type="primary" icon="el-icon-edit" circle></el-button>
        <el-button size="mini" type="primary" icon="el-icon-share" circle></el-button>
      
        </div>
    </div>
    <!-- 内容栏--表格 -->
    <div class="content-table-wrap" v-loading="loading" loading-type="chrome-circle-turn" :style="{height:ResultHeight+'px'}">
      <el-table
        v-if="data"
        border
        size="mini"
        :height.sync="tableHeight"
        :data="data"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          fixed
            type="index"
            :index="tableIndex">
        </el-table-column>

        <el-table-column
          fixed
          prop="name"
          label="类型名称"
          width="100">
        </el-table-column>

        <el-table-column
          prop="code"
          label="类型编码"
          width="100">
        </el-table-column>

        <el-table-column
          prop="systemFlag"
          label="系统字典"
          width="80">
        </el-table-column>

        <el-table-column
          prop="sort"
          label="排序"
          width="80">
        </el-table-column>

        <el-table-column
          prop="description"
          label="备注"

        >
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200">
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >

          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>

            <el-button
              size="mini"
              type="primary"
              @click="handleDel(scope.$index, scope.row)"
            >删除</el-button>

            

          </template>

        </el-table-column>

      </el-table>  

      <!-- 分页 -->
      <div ref="adminContentPagination" class="content-pagination-wrap">
        <el-pagination
            background
            :current-page="page.currentPage"
            :page-sizes="pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
      </div>
    </div>

    <!-- 修改dialog -->
    <position-edit-dialog
      :visible="editDialogVisible"
      :form.sync='editForm'
      :type="editType"
      @cancel="editDialogCancel"
      @confirm="editDialogConfirm"
    ></position-edit-dialog>

    <!-- 分配角色dialog -->
    <el-dialog title="分配权限"
               :visible.sync="rolesDialog"
               width="40%">
      <el-scrollbar style="height:400px">
        <el-tree :data="rolesTree"
                 show-checkbox
                 node-key="id"
                 default-expand-all
                 @check="rolesChange"
                 :default-checked-keys="rolesKeys"
                 :props="{label:'name',value:'id'}">
        </el-tree>
      </el-scrollbar>
      <span slot="footer">
        <el-button type="primary"
                   size="small"
                   @click="handleSetRoles">确 定</el-button>
      </span>
    </el-dialog>



  </div>

</template>

<script>
import { mapGetters } from 'vuex'

import {
  getList,
  getDictType,
  remove,
  update,
  add,
} from "@/api/admin/dictType";

import PositionEditDialog from '@/components/Dialog/positionEditDialog';

import adminMixins from "@/mixins/admin"
export default {
  name: 'dictType',
  mixins:[adminMixins],
  components:{
    PositionEditDialog
  },
  computed: {
    ...mapGetters([
      'name',
      'permission',
      'userInfo'
    ])
  },
  data(){
    return{
      //1新增，2修改
      editType:1,
      loading:true,
      query:{},
      //修改模态框的显示隐藏
      editDialogVisible:false,
      //分配角色模态框
      rolesDialog:false,
      rolesTree: [],
      rolesKeys: [],
      userId:{
        account:''
      },
      data:null,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      pageSizes:[10,20,30,40,50,100],
      editForm:{}
    }
  },
  mounted(){
    //设置dom尺寸
    this.setSize();
    this.loadData(this.page)
  },
  methods:{
    //请求table数据
    loadData(page, params = {}){
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {

          console.log(res)
          this.loading = false;
          this.page.total = res.data.count;
          this.data = res.data.data;

          console.log("---------职位数据---------------")
          console.log(this.data)

        });
        
    },
    
    //转换账号状态
    statusChange(row){

      console.log(row)

      if (row.status === 'ENABLE') {

        changeStatus(row.positionId, 'false');
      } else {
        changeStatus(row.positionId, 'true');
      }
    },
    //表格序号
    tableIndex(index){
      return index+1
    },
    //新增用户
    handleAdd(){
        this.editForm = null;
        this.editType = 1;
        //模态框显示
        this.editDialogVisible = true;
    },
    convertDetailData(data){
      if(data.status == 'ENABLE'){
        data['$status'] = true
      }else{
        data['$status'] = false
      }

      return data;
    },
    //点击操作的编辑
    handleEdit(index,row){
      //获取当前修改菜单的信息，赋值给editForm
      getPoistion(row.positionId).then((res)=>{
          console.log("------获取职位-------")
          console.log(res)

          this.editType = 2;

          this.editForm = this.convertDetailData(res.data.data);
          //模态框显示
          this.editDialogVisible = true;
      })
      
    },
    //点击操作的删除
    handleDel(index,row){
      console.log(row)

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(()=>{
          return remove(row.roleId);
        }).then((res) => {

          this.loadData(this.page)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
        });
    },
    //分配权限
    handleRoles(index,row){
      /*this.form = row;
        this.form.roleId = this.form.roleId || '';
        this.rolesKeys = row.roleId.split(',')
        this.rolesDialog = true;*/
    },
    rolesChange (data, checked) {
      this.form.roleId = checked.checkedKeys.join(',')
    },
    handleSetRoles () {
      setRoles(this.form.userId, this.form.roleId).then(() => {
        this.$message.success('设置成功');
        this.rolesDialog = false;
        this.loadData(this.page);
        this.form = {}
      })
    },
    editDialogCancel(){
      this.editDialogVisible = false;
      this.editForm = null;
    },
    editDialogConfirm(form){

      if(form.type == 1){

        add(form.data).then((res)=>{

          this.editDialogVisible = false;
          this.loadData(this.page)
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
        })

      }else if(form.type == 2){

        update(form.data).then((res)=>{

          this.editDialogVisible = false;
          this.loadData(this.page)
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  &-container {

  }
  /***搜索栏***/
  &-search-wrap{
    padding: 15px;
    border-bottom: 1px solid #E8EBEE;
  }
  /***工具栏***/
  &-tools-wrap{
    padding: 15px;
  }
  /***内容栏***/
  &-table-wrap{
    position: relative;
    padding: 15px;
  }
  /***分页***/
  &-pagination-wrap{
    padding-top: 15px;
    text-align: right;
  }
}
</style>
